<template>
    <div class="systemForm">
        <el-form
            ref="formRef"
            :key="new Date().getTime()"
            :inline="props.inline"
            :model="data"
            :label-position="props.labelPosition"
            :label-width="props?.labelWidth"
            :size="props.size"
            @submit.native.prevent
        >
            <el-form-item v-for="(item, index) in formItem" :label="item.label ? $t(`${item.label}`) : ''" :key="index" :prop="item.prop" :rules="item.rules">
                <!-- input输入框 -->
                <el-input
                    v-if="item.type === 'input'"
                    v-model="data[item.prop]"
                    :placeholder="$t(`${item.placeholder}`)"
                    :disabled="item.disabled"
                    :show-password="item.isPwd"
                    @keyup.enter.native="keyups(item)"
                >
                    <template #prefix v-if="item.iconPosition === 'left'">
                        <el-icon v-if="item.icon" :size="item.iconSize || 20">
                            <component :is="item.icon" />
                        </el-icon>
                    </template>
                    <template #suffix v-if="item.iconPosition === 'right'">
                        <el-icon v-if="item.icon" :size="item.iconSize || 20">
                            <component :is="item.icon" />
                        </el-icon>
                    </template>
                </el-input>
                <!-- 选择框 -->
                <el-select v-if="item.type === 'select'" v-model="data[item.prop]" :placeholder="$t(`${item.placeholder}`)" :disabled="item.disabled">
                    <el-option v-for="list in item.options" :key="list.teamId" :label="list.teamName" :value="list.teamId" />
                </el-select>
                <!-- 文本域 -->
                <el-input
                    v-if="item.type === 'textarea'"
                    v-model="data[item.prop]"
                    :placeholder="$t(`${item.placeholder}`)"
                    resize="none"
                    :disabled="item.disabled"
                    type="textarea"
                    :rows="3"
                    show-word-limit
                />
                <!-- 星级选择 -->
                <el-rate v-if="item.type === 'start'" v-model="data[item.prop]" />
                <!-- 按钮组 -->
                <div class="formButtons" v-if="item.type === 'buttons'">
                    <el-button v-for="(list, index) in item.children" :style="{ width: list.width }" :type="list.type" @click="handleButtonClick(formRef, list)" :disabled="list.disabled">
                        <el-icon v-if="list.iconPosition === 'left'" :size="list.iconSize || 20">
                            <component :is="list.icon" />
                        </el-icon>
                        {{ $t(`${list.value}`) }}
                        <el-icon v-if="list.iconPosition === 'right'" :size="list.iconSize || 20">
                            <component :is="list.icon" />
                        </el-icon>
                    </el-button>
                </div>
            </el-form-item>
        </el-form>
    </div>
</template>
<script lang="ts" setup>
import { reactive, ref } from "vue";
import type { FormInstance } from "element-plus";
import { nextTick, onMounted } from "vue";
interface Item {
    value?: string | undefined; // 默认值
    prop: string; // 绑定的属性名
    type: string | undefined; // 类型
    label?: string | undefined; // 标签
    placeholder?: string | undefined; // 提示
    options?: Array<{ label: string; value: string; teamId: string; teamName: string }> | undefined; // 选项
    disabled?: boolean; // 是否禁用
    icon?: string | undefined; // 图标
    iconPosition?: "left" | "right"; // 图标位置
    iconSize?: number | undefined; // 图标大小
    click?: ((data: Item[]) => void) | undefined; // 点击事件
    isPwd?: boolean; // 是否密码
    children?: Array<Item>; // 按钮组
    width?: string; // 按钮宽度
    rules?: any; // 表单校验规则
    subMit?: boolean; // 按钮是否为提交
    isKeyup?: boolean; // 是否回车提交
}
interface Props {
    formItem: Array<Item>; // 表单列表
    data: any; // 表单数据
    size?: string; // 表单大小
    inline?: boolean; // 是否行内表单
    labelPosition?: string; // 标签位置
    labelWidth?: number; // 标签宽度
}
const props = withDefaults(defineProps<Props>(), {
    formItem: () => [] as Item[], // 提供一个空的 Item[] 数组作为默认值
    data: {}, // 提供一个空的 Item[] 数组作为默认值
    size: "default",
    inline: false,
    labelPosition: "left",
    labelWidth: 0,
});
const formRef = ref<FormInstance>();

// 定义响应式数据
const data = reactive({});
onMounted(() => {
    nextTick(() => {
        // 初始化表单数据
        Object.assign(data, props.data);
        // formRef.value?.resetFields();
    });
});
// 点击按钮事件处理函数
const handleButtonClick = (formEl: FormInstance | undefined, item: Item) => {
    if (!formEl) return;
    if (!item.click) return;
    if (item.subMit) {
        formEl.validate((valid) => {
            if (valid) {
                (item as any).click(data);
            } else {
                console.log("error submit!");
            }
        });
    } else {
        formEl.resetFields();
        (item as any).click(data);
    }
};
// 回车提交事件处理函数
const keyups = (item: any) => {
    if (item.isKeyup) {
        let formBtns: any = [];
        props.formItem.forEach((v) => {
            if (v.type === "buttons") {
                formBtns = v.children;
            }
        });
        const submutItem = formBtns.find((item: any) => item.subMit);
        handleButtonClick(formRef.value, submutItem);
    }
};
</script>
